// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    leftList:["小米手机","Redmi手机","黑鲨手机","电视","大家电","电脑办公","小爱音箱","路由器","生活电器","厨房电器","智能穿戴","智能家居","车载出行","个护健康","数码配件","日用百货","有品精选","小米服务","零售店"],
    rightList:[
      {
        title:"小米手机",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"Redmi手机",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"黑鲨手机",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"电视",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"大家电",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"电脑办公",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"小爱音箱",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"路由器",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"生活电器",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"厨房电器",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"智能穿戴",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"智能家居",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"车载出行",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"个护健康",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"数码配件",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"日用百货",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"有品精选",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"小米服务",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      },
      {
        title:"零售店",
        content:[
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone3.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone1.jpg",
            name: "Redmi K30 4G"
          },
          {
            img: "../../image/phone2.jpg",
            name: "Redmi K30 4G"
          }
        ]
      }
    ],
    // 屏幕高度
    winHei:"",
    // 左边导航点击的下标值
    tabIndex:0,
    // 右边内容的下标值
    rightIndex:0,
    // 左边导航距离顶部的位置
    leftscrollTop:0,
  },

  // 左边导航的点击事件
  changeTab:function(event){
    var index = event.target.dataset.id
    // console.log(index)
    this.setData({
      tabIndex:index,
      rightIndex:index,
      leftscrollTop:(index - 3) * 50
    })
  },

  // 右边的滚动事件
  scrollRight:function(event){
    // 定义中间变量
    var elementHeight = 0
    // 获取右边数据
    var rightList = this.data.rightList
    for(let i=0;i<rightList.length;i++){
      // 获取节点信息
      wx.createSelectorQuery().select('#scroll-'+i).fields({
        size: true,
      }, function (res) {
        // res.height     //节点的高度
        // console.log(res.height)
        rightList[i].top = elementHeight
        elementHeight += res.height+30   // i+=1 i=i+1
        rightList[i].bottom = elementHeight
      }).exec()
    }
    // 修改data里面的数据
    this.setData({
      rightList:rightList
    })
    // console.log(this.data.rightList)
    // 右边的滚动高度
    var scrollTop = event.detail.scrollTop
    for(let j=0;j<rightList.length;j++){
      // 判断
      if(scrollTop >= rightList[j].top && scrollTop < rightList[j].bottom-2){
        // console.log(j)
        this.setData({
          tabIndex:j,
          leftscrollTop:(j - 3) * 50
        })
      }
    }
    // console.log(scrollTop)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      winHei:wx.getSystemInfoSync().windowHeight
    })
    // console.log(this.data.winHei)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})